<template>
  <div class="email-body">
    <div v-if="isshow">
      <p>旧邮箱为 {{oldEmail}}</p>
      <p>请输入新邮箱地址</p>
      <el-input placeholder="请输入内容" v-model="newEmail" clearable></el-input>
      <el-button type="primary" @click="sendCode" class="send">发送验证码</el-button>
      <p>请输入验证码</p>
      <el-input placeholder="请输入内容" v-model="checkCode" clearable></el-input>
      <el-button type="primary" @click="changeEmail" class="change">完成修改</el-button>
    </div>

    <div v-if="!isshow">
      <p style="padding-bottom: 50px;padding-top: 70px;">请输入用户的通行证号码：</p>
      <el-input placeholder="请输入内容" v-model="userAccount" clearable></el-input>
      <el-button type="primary" @click="queryinfo" class="change">查询</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      checkCode:'',
      newEmail:'',
      oldEmail:'',

      userAccount : '',
      isshow : false
    }
  },

  methods:{
    async sendCode(){
      const res = this.$http.post('user/userEmailSendAgain',{
        email : this.newEmail
      })

      if(this.newEmail != ''){
        this.$message({
          message:'验证码发送成功',
          type:'success'
        })
      }else{
        this.$message.error({
          message:'新邮箱不能为空！'
        })
      }
    },

    async changeEmail(){
      const res = await this.$http.post('user/userEmailCodeCheck',{
        code : this.checkCode
      })

      if(res.data.status===0){
        const res2 = await this.$http.post('user/updataEmail',{
          userAccount : window.sessionStorage.getItem('userAccount'),
          email : this.newEmail
        })

        this.$message({
          message: res2.data.message
        })
      
      }else{
        this.$message.error({
          message:'验证码错误'
        })
      }
    },

    async queryinfo(){
      this.isshow = true

      const res2 = await this.$http.post('user/userInfoQuery',{
        userAccount : this.userAccount
      })

    this.oldEmail = res2.data.data.email
    }
  },
}
</script>

<style>
.email-body{
  width: 80%;
  height: 80%;
  background-color: white;
  margin-left:120px;
  margin-top: 80px;

  opacity: 1;
  border-radius : 20px;
}
.email-body>div>p{
  font-size: 20px;
  margin-top: 50px;
}

.email-body>div{
  width: 500px;
  margin-left: 300px;
  padding-top:100px;
}

.send{
  position: absolute;
  top: 325px;
  right: 500px;
}
</style>